<template>
    <div class="breadcrumb">
        <div class="list">
            <span @click="jumpPage">当前位置：</span>
            <span @click="jumpPage">首页</span>
            <span><i class="el-icon-caret-right"></i></span>
            <span class="name">{{ name || '文章' }}</span>
        </div>
    </div>
</template>
<script>
export default {
    name: 'breadcrumb',
    components: {},
    data() {
        return {
            name: '',
        }
    },
    watch: {},
    mounted() {
        this.getquery();
    },
    methods: {
        jumpPage() {
            this.$router.push({ path: '/index' })
        },
        getquery() {
            this.name = this.$route.query?.name;
        },
    }
}
</script>

<style lang="scss" scoped>
.breadcrumb {
    cursor: pointer;

    .list {
        color: #666666;
        font-size: 14px;
        line-height: 30px;
        border-bottom: 1px solid #e8e8e8;
    }

    .name {
        color: #333333;
    }
}
</style>